<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
  <meta charset="utf-8">
  <title>运维单评价</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=0.9, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="./layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" href="./style/admin.css" th:href="@{/style/admin.css}" media="all">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="./js/html5.min.js" th:src="@{/js/html5.min.js}"></script>
  <script src="./js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
  <![endif]-->
  <script type="text/javascript" charset="utf-8" th:inline="javascript">
    var ctxPath = /*[[@{/}]]*/'';
    var authority = [[${#authorization.expression('hasAuthority("超级管理员")')}]];
  </script>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <form class="layui-form-item" onsubmit="return false;">
        <div class="layui-inline">
          <label class="layui-form-label">运维单编号</label>
          <div class="layui-input-block">
            <input type="text" name="feedNumber" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">提出人员</label>
          <div class="layui-input-block">
            <input type="text" name="submitUser" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">处理状态</label>
          <div class="layui-input-block">
            <select name="status">
              <option value="">所有</option>
              <option value="0">未分配</option>
              <option value="1">待处理</option>
              <option value="2">已处理</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="list-table-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
          <button id="reset" type="reset" class="layui-btn">清空</button>
        </div>
      </form>
    </div>

    <div class="layui-card-body">
      <table id="list-table" lay-filter="list-table"></table>
      <!--            <script type="text/html" id="imgTpl">-->
      <!--                <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>-->
      <!--            </script>-->

      <script type="text/html" id="list-table-toolbar-detail">
        <div class="layui-btn-group">
          <a class="layui-btn layui-btn-sm layui-btn-xs" lay-event="info"><i
                  class="layui-icon layui-icon-read"></i>详情</a>
          <a class="layui-btn layui-btn-sm layui-btn-xs" lay-event="submit">
            <i class="layui-icon layui-icon-list"></i>评价</a>
        </div>
      </script>
    </div>
  </div>
</div>
<script src="./js/common.js" th:src="@{/js/common.js}" charset="utf-8"></script>
<script src="./layui/layui.js" th:src="@{/layui/layui.js}"></script>
<script charset="utf-8" th:inline="javascript">
  layui.config({
    base: ctxPath //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function () {
    var $ = layui.$, admin = layui.admin, form = layui.form, table = layui.table, device = layui.device();
    table.render({
      elem: '#list-table',
      url: ctxPath + 'monitor-feed/common-get-monitor-feed-list',
      toolbar: '#list-table-toolbar',
      request: {
        pageName: 'current',//页码的参数名称，默认：page
        limitName: 'size' //每页数据量的参数名，默认：limit
      },
      response: {
        statusName: 'code', //规定数据状态的字段名称，默认：code
        statusCode: 200,//规定成功的状态码，默认：0
        msgName: 'msg',//规定状态信息的字段名称，默认：msg
        countName: 'count', //规定数据总数的字段名称，默认：count
        dataName: 'data' //规定数据列表的字段名称，默认：data
      },
      parseData: function (res) { //res 即为原始返回的数据
        return {
          'code': res.code, //解析接口状态
          'msg': res.msg, //解析提示文本
          'count': res.data.total, //解析数据长度
          'data': res.data.records //解析数据列表
        };
      },
      done: function () {
        $('[data-field="status"]').children().each(function () {
          if ($(this).text() === '0') {
            $(this).html('<span style="color: #FF4500;font-weight: bold;">未分配</span>');
          }
          if ($(this).text() === '1') {
            $(this).html('<span style="color: #f7ff00;font-weight: bold;">待处理</span>');
          }
          if ($(this).text() === '2') {
            $(this).html('<span style="color: #00ff22;font-weight: bold;">已处理</span>');
          }
        });
        $('[data-field="appraise"]').children().each(function () {
          if ($(this).text().length ===0) {
            $(this).html('<span style="color: #FF4500;font-weight: bold;">暂未评价</span>');
          }
        });

      },
      cols: [
        [{
          type: 'checkbox',
          hide: !authority
        }, {
          field: 'id',
          width: 70,
          title: 'ID',
          sort: !0,
          hide: true
        }, {
          field: 'feedNumber',
          title: '运维单单号',
          width: 180,
          sort: !0
        }, {
          field: 'feedTitle',
          title: '工单标题',
          width: 250,
          sort: !0
        },{
          field: 'solveUser',
          title: '解决人员',
          minWidth: 100,
          sort: !0
        },{
          field: 'solveTime',
          title: '解决时间',
          minWidth: 150,
          sort: !0
        }, {
          field: 'status',
          title: '处理状态',
          minWidth: 120,
          sort: !0
        }, {
          field: 'appraise',
          title: '评价',
          minWidth: 120,
          sort: !0
        },{
          title: '操作',
          width: 210,
          align: 'center',
          fixed: (device.ios || device.android) ? false : 'right',
          toolbar: '#list-table-toolbar-detail'
        }]
      ],
      page: !0,
      limit: 15,
      limits: [10, 20, 40, 50, 100],
      height: 'full-150'
    });
    //监听搜索
    form.on('submit(list-table-search)', function (data) {
      var field = data.field;
      //执行重载
      table.reload('list-table', {
        where: field
      });
    });
    // 点击表头排序
    table.on('sort(list-table)', function (obj) {
      table.reload('list-table', {
        initSort: obj
      });
    });
    //监听工具条
    table.on('tool(list-table)', function (obj) {
      var data = obj.data;
      data.appraise = data.appraise;
      if (obj.event === 'info') {
        // 宽度
        var width;
        // 高度
        var height;
        // 移动端
        if (device.ios || device.android) {
          // 宽度
          width = document.body.clientWidth * 0.8 + 'px';
          // 高度
          height = document.body.clientHeight * 0.55 + 'px';
        } else {
          // 宽度
          width = document.body.clientWidth * 0.6 + 'px';
          // 高度
          height = document.body.clientHeight * 0.8 + 'px';
        }
        var infoLayerIndex = layer.open({
          type: 2,
          title: '运维单详情',
          content: ctxPath + 'monitor-feed/feed-detail?id=' + data.id,
          maxmin: true,
          shade: 0,
          moveOut: true,
          area: [width, height],
          success: function (layero, index) {
            // 在回调方法中的第2个参数“index”表示的是当前弹窗的索引
            // 通过layer.full方法将窗口放大
            // layer.full(index);
          }
        });
        // layer.full(infoLayerIndex);
      }

      if (obj.event === 'submit') {
        // 宽度
        var width;
        var feedid = data.id;
        var status = data.appraise;
        // 高度
        var height;
        // 移动端
        if (device.ios || device.android) {
          // 宽度
          width = document.body.clientWidth * 0.68 + 'px';
          // 高度
          height = document.body.clientHeight * 0.45 + 'px';
        } else {
          // 宽度
          width = document.body.clientWidth * 0.45 + 'px';
          // 高度
          height = document.body.clientHeight * 0.5 + 'px';
        }
        if (status!=null){
          layer.msg('不可重复评价！', {icon: 5, shift: 6});
        }else {
        layer.open({
          type: 2,
          title: '运维评价',
          content: ctxPath + 'monitor-feed/add-feed-appraise',
          maxmin: true,
          area: [width, height],
          btn: ['确定', '取消'],
          yes: function (index, layero) {
            var iframeWindow = window['layui-layer-iframe' + index],
                    submitID = 'LAY-appraise-front-submit',
                    submit = layero.find('iframe').contents().find('#' + submitID);
            //监听提交
            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
              var field = data.field; //获取提交的字段
              field.content = localStorage.getItem("content")
              field.id = feedid;
              admin.req({
                type: 'put',
                url: ctxPath + 'monitor-feed/save-appraise',
                data: field,
                dataType: 'json',
                headers: {
                  [[${_csrf.headerName}]]: [[${_csrf.token}]]
                },
                success: function (result) {
                  var data = result.data;
                  if (data === webConst.SUCCESS) {
                    table.reload('list-table'); //数据刷新
                    layer.close(index); //关闭弹层
                    layer.msg('编辑成功！', {icon: 6});
                  } else {
                    layer.msg('编辑失败！', {icon: 5, shift: 6});
                  }
                },
                error: function () {
                  layer.msg('系统错误！', {icon: 5, shift: 6});
                }
              });
            });
            submit.trigger('click');
          }
        });}
      }
    });
  });
</script>
</body>
</html>